<template>
  <child-page>
    <div class="components-form-demo-advanced-search">
      <div>
        <a-transfer
          :dataSource="mockData"
          showSearch
          :listStyle="{
            width: '400px',
            height: '550px'
          }"
          :operations="['to right', 'to left']"
          :targetKeys="targetKeys"
          @change="handleChange"
          :render="item => `${item.title}`"
        >
          <span slot="notFoundContent">
            没数据
          </span>
        </a-transfer>
      </div>
      <a-row style="margin-top: 20px;">
        <a-col :span="24" :style="{ textAlign: 'center' }">
          <a-button type="primary" html-type="submit" @click="handleSubmit">
            提交
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="cancelBtn">
            取消
          </a-button>
        </a-col>
      </a-row>
    </div>
  </child-page>
</template>

<script>
import { Transfer } from "ant-design-vue";
import childPage from "@/components/childPageContent/index";
export default {
  name: "add",
  components: {
    childPage,
    [Transfer.name]: Transfer
  },
  data() {
    return {
      mockData: [],
      targetKeys: [],
      initialLift: [],
      initialRight: []
    };
  },
  methods: {
    handleChange(targetKeys) {
      this.targetKeys = targetKeys;
    },
    handleSubmit() {
      let listOut = [];
      let listIn = [];
      if (this.initialRight.length > 0) {
        for (let item of this.initialRight) {
          if (this.targetKeys.indexOf(item.key) === -1) {
            listOut.push(item.key);
          }
        }
        listOut = listOut.join(",");
      }
      if (this.targetKeys.length > 0) {
        for (let item of this.initialLift) {
          if (this.targetKeys.indexOf(item.key) === 0) {
            listIn.push(item.key);
          }
        }
        listIn = listIn.join(",");
      }
      this.$ajax
        .post(this.$api.giveRoleAuth, {
          id: this.$route.params.id,
          type: 2,
          user_list_in: listIn,
          user_list_out: listOut
        })
        .then(() => {
          this.$notification.success({
            message: "操作成功!"
          });
          this.$commonJs.getAthList();
          this.$router.push({ name: "authorityRole" });
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    cancelBtn() {
      this.$router.push({ name: "authorityRole" });
    },
    getInfo() {
      this.$ajax
        .post(this.$api.giveRoleAuth, {
          id: this.$route.params.id,
          type: 1
        })
        .then(res => {
          let targetKeys = [];
          if (res.list_out.length > 0) {
            for (let item of res.list_out) {
              let i = {};
              i.key = item.id;
              i.title = "【" + item.username + "】" + item.true_name;
              this.mockData.push(i);
            }
            this.initialLift = this.mockData;
          }
          if (res.list_in.length > 0) {
            for (let item of res.list_in) {
              let i = {};
              i.key = item.id;
              i.title = "【" + item.username + "】" + item.true_name;
              targetKeys.push(i);
              this.targetKeys.push(i.key);
            }
          }
          this.mockData = this.mockData.concat(targetKeys);
          this.initialRight = targetKeys;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less">
.components-form-demo-advanced-search {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  display: grid;
}

.components-form-demo-advanced-search .ant-form {
  width: 600px;
}
.components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>
